<template>
  <div>

     
	  <myheader></myheader>
		
		<div id="carousel" class="carousel slide" data-ride="carousel">
		

	
			<div class="carousel-inner">
			
				<!--Text only with background image-->
				<div class="carousel-item active">

					<!--轮播图-->

					<Carousel @change="changeimg" @click="clickimg" pageTheme="circle" :datas="imgs"></Carousel>
				
				</div>
				

				
			
			</div>
		</div>
		<section class="collections text-center ">
			<div class="container-fluid">
				<div class="row">
					<div class="collection col-md-6 alt-background">
						<div class="container container-right text-center">
							<div>
								<h1>Women's</h1>
								<p class="lead">Spring/Summer 2018 Collection</p>
								<a href="catalog.html" class="btn btn-outline-secondary">Browse Women's</a>
							</div>
						</div>
					</div>
					<div class="collection col-md-6 bg-secondary inverted">
						<div class="container container-left text-center">
							<div>
								<h1>Men's</h1>
								<p class="lead">Spring/Summer 2018 Collection</p>
								<a href="catalog.html" class="btn btn-outline-white">Browse Men's</a>
							</div>
						</div>
					</div>
				</div>
			</div>
    </section>
    
		<section class="featured-block text-center">
			<div class="container">
				<div class="row justify-center">
					<div class="col-md-6 text-center">
						<img class="mt-4 mb-4 img-fluid" src="../assets/images/placeholder-jacket.png" style="width: 100%;">
					</div>
					<div class="col-md-6 text-center text-md-left">
						<h2 class="mb-3">Spring/Summer Collection 2018</h2>
						<p class="lead mt-2 mb-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse cursus erat sed sem sagittis cursus.</p>
						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sed odio dui. Suspendisse cursus erat sed sem sagittis cursus. Etiam porta sem malesuada magna mollis euismod.</p>
						<a href="#" class="btn btn-md btn-outline-primary mt-3">Shop Now</a>
					</div>
				</div>
			</div>
		</section>
		
		<section class="products text-center">
			<div class="container">
				<h3 class="mb-4">商品列表</h3>
				<div class="row">
					<div v-for="item in goodslist" class="col-sm-6 col-md-3 col-product">
						<figure>
							<img class="rounded-corners img-fluid" :src="'http://127.0.0.1:8000/static/upload/'+item.img" width="240" height="240">
							<figcaption>
								<div class="thumb-overlay"><a href="item.html" title="More Info">
									<i class="fas fa-search-plus"></i>
								</a></div>
							</figcaption>
						</figure>
						<h4><a :href="'http://localhost:8080/item?id='+item.id">{{ item.name }}</a></h4>
						<p><span class="emphasis">${{ item.price }}</span></p>
					</div>
				
				</div>

			<!--heyui分页逻辑-->
          <br>
		  
          <div>

            <!-- <Pagination v-model="pagination" @change="change"  layout="pager,jumper" small></Pagination> -->

			<Pagination v-model="pagination" layout="pager,jumper" @change="get_goodslist" small></Pagination>

			<br>
			

          </div>

		  					  	<div class="row">
				<div v-for="item in goodslist_self" class="col-sm-6 col-md-3 col-product">
					<figure>
						<img class="rounded-corners img-fluid" :src="'http://127.0.0.1:8000/static/upload/'+item.img" width="240" height="240">
						<figcaption>
							<div class="thumb-overlay"><a href="item.html" title="More Info">
								<i class="fas fa-search-plus"></i>
							</a></div>
						</figcaption>
					</figure>
					<h4><a :href="'http://localhost:8080/item?id='+item.id">{{ item.name }}</a></h4>
					<p><span class="emphasis">${{ item.price }}</span></p>
				</div>
			
			</div>
							<!--自主分页容器-->
				<div>

				<a @click="get_goods_self(1)" >首页</a>


				<Button v-show="lastpage" @click="get_goods_self(lastpage)">上一页</Button>

				&emsp;&emsp;

				<!-- <span v-for="index in allpage">
					
					<a @click="get_goods_self(index)"  >{{ index }}</a>&emsp;&emsp;

				</span> -->

				<span v-for="item in last_page">
					
					<a @click="get_goods_self(item)"  >{{ item }}</a>&emsp;&emsp;

				</span>

				&emsp;&emsp;

				<a @click="get_goods_self(page)"  >{{ page }}</a>&emsp;&emsp;
								
				&emsp;&emsp;
				<span v-for="item in next_page">
					
					<a @click="get_goods_self(item)"  >{{ item }}</a>&emsp;&emsp;

				</span>


				&emsp;&emsp;

				<Button v-show="nextpage" @click="get_goods_self(nextpage)">下一页</Button>


				<a @click="get_goods_self(allpage)"  >尾页</a>
				&emsp;&emsp;	
				<input @input="jump_page($event)" style="width:50px" type="text">
				<div>

				<Button @click="get_goods_self(page,'price','')">按价格排序</Button>
				<Button @click="get_goods_self(page,'crerta_time','')">按创建时间排序</Button>
				</div>	
				</div>


			</div>

		</section>

		
		<div class="divider"></div>
		
		<section class="cta text-center">
			<div class="container">
				<h3 class="mt-0 mb-4">Sign up now to save 10% on your first order</h3>
				<form class="subscribe">
					<div class="form-group row pt-3">
						<div class="col-sm-8 mb-3">
							<input type="text" class="form-control" id="inputName" placeholder="Your Name">
						</div>
						<div class="col-sm-4">
							<button type="submit" class="btn btn-lg btn-outline-primary">Sign me up</button>
						</div>
					</div>
				</form>
			</div>



		</section>
		
	<myfooter></myfooter>
    
  </div>
  
</template>


 
<script>
//导入组件
import myheader from './myheader'
import myfooter from './myfooter'

export default {
  data () {
    return {
	  msg: "这是一个变量",

	  //商品列表
	  goodslist:[],

	//分页器变量
      pagination:{
        page:1,
        size:3,
        total:2
	  },
	  
	  //自主分页
      goodslist_self:[],
      //商品总数
      total_self:0,
      //上一页
      lastpage:0,
      //下一页
      nextpage:0,
      //当前页
      page:1,
      //总页数
      allpage:0,
      //每页展示数
	  size:1,
	  
	  //分页偏移
	  last_page:[],
	  next_page:[],

	  //分页排序
	  order:'',
	  coloum:'',

	  //轮播图图片
	  imgs:[

		  {
			  title:'广告活动页',
			  link:'http://www.baidu.com',
			  image:'http://localhost:8080/static/img/placeholder-jacket.f5996c6.png'
		  },
		  {
			  title:'活动促销页',
			  link:'http://www.baidu.com',
			  image:'http://localhost:8080/static/img/placeholder-product.1011f1b.jpg'
		  }
	  ]
    }
  },
    //注册组件标签
  components:{
	  'myheader':myheader,
	  'myfooter':myfooter,
  },
  mounted:function(){
	  this.get_carousel();
	  this.get_goodslist();

	  //自主分页
	  this.get_goods_self(1);


	//   //黑/白模式切换
	//   this.change_back();

   
  
},
  methods:{


	  //页面跳转
	  jump_page:function(e){
		
		var val = e.target.value;

		if(val > this.allpage){
			this.$Message('您输入有误');
			return false;
		}
		// this.goodslist_self(val)

		console.log(val);
	  },

	  //价格排序
	  price_order(coloum){
		  this.coloum=coloum;
		  this.get_goods_self(this.page)

	  },


	//获取商品
     get_goodslist:function(){

                     //请求后台接口
		  this.axios.get('http://127.0.0.1:8000/goodslist/',{params:{page:this.pagination.page,size:this.pagination.size}}).then((result)=>{

				
				
				this.goodslist = result.data.data;
				this.pagination.total = result.data.total;

            
			});

	 },

    //自主分页
    get_goods_self:function(page,order,coloum){

		this.page = page

		var coloum = coloum
		var order = order

		if(coloum||order){
			this.coloum = coloum
			this.order = order
		}

		// console.log(this.coloum)
		// console.log(this.order)

      //发送请求
      this.axios.get('http://localhost:8000/goodslist/',{params:{page:page,size:this.size,coloum:this.coloum,order:this.order}}).then((result) =>{

        

        this.goodslist_self = result.data.data;

        //商品总数
        this.total_self= result.data.total;

        //判断上一页
        if(page==1){
        	this.lastpage = 0;
        }else{
        	this.lastpage = page - 1;
        }

        //计算总页数
		this.allpage = Math.ceil(this.total_self / this.size);

        //判断下一页
        if(page == this.allpage){
        		this.nextpage = 0;
        }else{
        		this.nextpage = page + 1;
		}


		//设置偏移量
		var move_page = 2;

		var my_last = [];

		//计算左侧偏移量
		for (let i=page-move_page;i<page;i++){

			if(i > 0){
				my_last.push(i);
			}

		}

		//计算右侧偏移量

		var my_next = [];

		//计算左侧偏移量
		for (let i=page+1;i<=page+move_page;i++){

			if(i <= this.allpage){
				my_next.push(i);
			}

		}


		// console.log(my_next);
		// console.log(my_last);
 

		this.last_page = my_last;
		this.next_page = my_next



      }); 

    },


	//   //切换主题颜色
	//   change_back:function(){

	// 	  //获取样式表
	// 	  var styles = getComputedStyle(document.documentElement);

	// 	  //动态更改
	// 	  document.documentElement.style.setProperty("--bg-color","#292a2d");

	// 	  //字体颜色
	// 	  document.documentElement.style.setProperty("--a-color","white");



	//   },

	  //获取轮播图接口
	  get_carousel:function(){
					
			//请求后台接口
		  this.axios.get('http://127.0.0.1:8000/getcarousel/').then((result)=>{

				// console.log(result);

				var mylist = [];

				//遍历数组
				for(let i=0,l=result.data.length;i<l;i++){

					// console.log(result.data[i]);

					mylist.push({title:result.data[i].name,link:result.data[i].src,image:result.data[i].img});
				}

				 this.img = mylist;
			


			});

	  },

	  //点击轮播图
	  clickimg:function(index,data){

		//   alert(data.link);
		//跳转
  		window.location.href = data.link;

	  },
	  
	  //切换轮播图
	  changeimg:function(index,data){

		//   console.log(data);


	  }

     
  }
}


</script>
 
<style>



</style>